<template>
		<div class="topBox">
			<div class="topBox-title">商品推荐</div>
			<div class="topBox-box">
				<el-row :gutter="30">
					<el-col :sm="24" :md="24" :lg="16">
						<div class="box-recommend">
							<div class="recommend-title">什么是货源推荐？</div>
							<div class="recommend-tips">货源推荐是鲸喜生活为商家提供的一站式铺货代销平台，聚合海量站内外货源，低成本高效率</div>
							<el-row :gutter="10">
								<el-col :xs="24" :sm="8" :md="8">
									<div class="recommend-card">
										<img class="card-icon" :src="'./static/images/seller/computer.png'" alt="">
										<div class="card-box">
											<div class="card-box-text">热销爆品</div>
											<div class="card-box-tips">行业爆款畅销好货</div>
										</div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8">
									<div class="recommend-card">
										<img class="card-icon" :src="'./static/images/seller/computer.png'" alt="">
										<div class="card-box">
											<div class="card-box-text">一件代发</div>
											<div class="card-box-tips">无需库存不囤货</div>
										</div>
									</div>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8">
									<div class="recommend-card">
										<img class="card-icon" :src="'./static/images/seller/computer.png'" alt="">
										<div class="card-box">
											<div class="card-box-text">轻松经营</div>
											<div class="card-box-tips">上游直发售后无虑</div>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>
					</el-col>
					<el-col :sm="24" :md="24" :lg="8">
						<div class="box-merchant">
							<div class="merchant-title">
								商家声音
							</div>
							<div class="merchant-leaveWord">
								<div class="leaveWord-text">我做梦也没想到在鲸喜能卖出1000单，必须要跟进鲸喜工作人员的步伐，感谢货源平台的运营人员，每周给我推送优质新品货源！
								</div>
								<div class="leaveWord-name">@马**小店</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from '../recommend.service';
import { useModal, usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { cloneDeep } from 'lodash';
import { ElMessageBox } from 'element-plus';

import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(() => {
})


</script>

<style scoped lang="scss">
	.topBox {
		.topBox-title {
			font-family: Source Han Sans;
			font-size: 20px;
			font-weight: bold;
			line-height: normal;
			letter-spacing: normal;
			color: #000000;
		}

		.topBox-box {
			margin-top: 10px;
			background: #F2F5FF;
			padding: 16px;

			.box-recommend {
				.recommend-title {
					margin-top: 10px;
					font-family: Source Han Sans;
					font-size: 18px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
					color: #232222;
				}

				.recommend-tips {
					margin-top: 6px;
					margin-bottom: 12px;
					font-family: Source Han Sans;
					font-size: 16px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
					color: #232222;
				}

				.recommend-card {
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10px;
					background: #FFFFFF;
					height: 80px;

					.card-icon {
						width: 40px;
						height: 42px;
						margin-right: 10px;
					}

					.card-box {

						.card-box-text {
							font-family: Source Han Sans;
							font-size: 16px;
							font-weight: bold;
							line-height: normal;
							letter-spacing: normal;
							color: #494949;
						}

						.card-box-tips {
							font-family: Source Han Sans;
							font-size: 16px;
							font-weight: normal;
							line-height: normal;
							letter-spacing: normal;
							color: #9E9E9E;
						}
					}
				}
			}

			.box-merchant {
				height: 100%;
				display: flex;
				flex-direction: column;
				.merchant-title {
					margin-top: 6px;
					font-family: Source Han Sans;
					font-size: 18px;
					font-weight: bold;
					line-height: normal;
					letter-spacing: normal;
					color: #454343;
				}

				.merchant-leaveWord {
					flex: 1;
					margin-top: 10px;
					padding: 10px;
					border-radius: 10px;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.leaveWord-text {
						font-family: Source Han Sans;
						font-size: 16px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						color: #9E9E9E;
					}

					.leaveWord-name {
						font-family: Source Han Sans;
						font-size: 16px;
						font-weight: normal;
						line-height: normal;
						text-align: right;
						letter-spacing: normal;
						color: #9E9E9E;
					}
				}

			}
		}
	}
</style>